<template>
  <div id="big">
    <div v-if="active=='index'" id="container">
      <div @click="active='many'" class="option"><span>批</span><span>量</span><span>导</span><span>入</span></div>
      <div @click="active='single'"  class="option"><span>单</span><span>个</span><span>导</span><span>入</span></div>
    </div>

    <div id="many" v-if="active=='many'">
      <div style="width: 50%;height: 100%;display: flex;justify-content: center;flex-direction: column">
        <el-page-header @back="goBack" content="批量导入"></el-page-header>
        <br>
        <a :href="baseUrl+'/university/downloadExcel'"><el-button size="mini">点此下载模板</el-button></a>
        <br>
        <el-upload
            accept=".xlsx"
            class="upload-demo"
            drag
            name="multipartFiles"
            :headers="{TOKEN:token}"
            :action="baseUrl+'/university/student/'+userId"
            :on-success="success"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传Excel文件，且不超过50Mb, 请按照提供模板导入学生</div>
        </el-upload>
      </div>

    </div>

    <div id="single" v-if="active=='single'">
      <el-form :model="ruleForm" :rules="rules" inline ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="学生姓名" prop="name">
          <el-input size="mini"  v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学生年龄" prop="age">
          <el-input size="mini"  v-model="ruleForm.age"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="学生性别" prop="sex">
          <el-select size="mini" v-model="ruleForm.sex" placeholder="请选择">
            <el-option key="男" label="男" value="男"></el-option>
            <el-option key="女" label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="身份证号码" prop="idCard">
          <el-input style="width:480px" size="mini"  v-model="ruleForm.idCard"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="专业" prop="profession">
          <el-input size="mini"  v-model="ruleForm.profession"></el-input>
        </el-form-item>
        <el-form-item label="毕业年份" prop="session">
          <el-select size="mini" v-model="ruleForm.session" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item style="float: right">
          <el-button size="mini" type="danger" @click="active='index'">返回</el-button>
          <el-button size="mini" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {baseUrl} from "../../../network/baseUrl";

export default {
  name: "addStu",
  data(){
    return{
      token:localStorage.getItem("TOKEN"),
      baseUrl:baseUrl(),
      userId:localStorage.getItem('userId'),
      options:[
        {value:2015},
        {value:2016},
        {value:2016},
        {value:2017},
        {value:2018},
        {value:2019},
        {value:2020},
      ],
      active:'index',
      ruleForm: {
        name: '',
        age: '',
        sex: '',
        idCard: '',
        profession:'',
        session:'',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号码', trigger: 'change' }
        ],
        profession: [
          { required: true, message: '请输入专业', trigger: 'change' }
        ],
        session: [
          { required: true, message: '请选择毕业年份', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    goBack(){
      this.active='index'
    },
    success(res){
      console.log(res)
      this.$message.success(res.msg)
    }
  }
}
</script>

<style scoped>
#big{
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/img/fj1.jpg");
  background-size: 100% 100%;
}
#container{
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgba(255,255,255,.2);
  justify-content: center;
  align-items: center;
}
.option{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 28px;
  margin: 5%;
  border-radius: 2%;
  width: 15%;
  height: 60%;
  background-color: rgb(2,182,253,.6);
  transition: all .3s ease-out;
  transform-origin: left;
  cursor: pointer;
}
.option:hover{
  width: 30%;
  background-color: rgb(2,182,253,1);
}
#many{
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#single{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>